<template>
    <div class="authority">
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true">
                <el-form-item label="分中心">
                    <el-select v-model="searchInfo.ownershipType" placeholder="请选择" style="width:300px">
                        <el-option v-for="item in fzxList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="primary" icon="search" @click="addUnit">
                打开导出窗口
            </el-button>
        </div>
        <el-drawer v-model="dialogFormVisible" :size="appStore.drawerSize" :before-close="handleClose"
            :show-close="false">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ dialogTitle }}</span>
                    <div>
                       
                    </div>
                </div>
            </template>
            <div class="content">
                <div class="item">
                    <div class="label">
                        分中心:
                    </div>
                    <div class="value">
                        市直单位
                    </div>
                </div>
                <div class="item">
                    <div class="label">
                        行政区划代码:
                    </div>
                    <div class="value">
                        500100000000
                    </div>
                </div>
                <div class="item">
                    <div class="label">
                        行政区划名称:
                    </div>
                    <div class="value">
                        重庆市市辖区
                    </div>
                </div>
                <div class="item">
                    <div class="label">
                        行政区划级别:
                    </div>
                    <div class="value">
                        省（区、市）
                    </div>
                </div>
                <div class="btns">
                    <el-button type="primary" @click="addUnit">
                        导出
                    </el-button>
                    <el-button @click="closeDialog">
                        关闭
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
import {
    getBgqList,
    deleteBgq,
    createBgq,
    updateBgq
} from '@/api/shujuchuli'
import {
    getRegionList
} from '@/api/unit'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
    name: 'Bangonglou'
})
const appStore = useAppStore()
const defaultProps = {
    children: 'children',
    label: 'name',
}

const form = ref({
    address: '',
    administrative: '',
    coverArea: '',
    createYear: '',
    map: '',
    name: '',
    notes: '',
    ownership: '',
    ownershipType: '',
    panorama: '',
    rent: ''
})

const searchInfo = ref({
    address: '',
    administrative: '',
    name: '',
    ownershipType: ''
})
const fzxList = ref([])
const userStore = useUserStore()
const headerOdj = ref({ token: userStore.token })
const adminUrl = ref('')
adminUrl.value = import.meta.env.VITE_BASE_PATH + '/file/upload'
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const bangongquForm = ref(null)

const initForm = () => {

}

const checkedColumns = ref(['办公区名称', '占地面积(平方米)', '办公区地址', '行政区划', '土地权属类别', '楼宇数', '宗地图', '操作'])
if (localStorage.getItem('columnData') && JSON.parse(localStorage.getItem('columnData')).bangongqu) {
    checkedColumns.value = JSON.parse(localStorage.getItem('columnData')).bangongqu
}
const columns = ref(['办公区名称', '占地面积(平方米)', '办公区地址', '行政区划', '土地权属类别', '楼宇数', '宗地图', '操作'])

const isEdit = ref(false)
const dialogTitle = ref('国管局报表导出')
const addUnit = () => {
    dialogTitle.value = '国管局报表导出'
    isEdit.value = false
    dialogFormVisible.value = true
}
const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}

const handleClose = (done) => {
    initForm()
    done()
}

const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
    const res = await getBgqList({
        pageNumber: page.value,
        pageSize: pageSize.value,
        ...searchInfo.value
    })
    if (res.code == 200) {
        tableData.value = res.result.data
        total.value = res.result.total
    }
}
getTableData()
const areaList = ref([])

onMounted(() => {
    getRegionList().then(res => {
        areaList.value = res.result
    })
})

const enterDialog = async () => {
    bangongquForm.value.validate(async (valid) => {
        if (valid) {
            let res
            if (isEdit.value) {
                res = await updateBgq(form.value)
            } else {
                form.value.createYear = 0
                form.value.rent = 0
                res = await createBgq(form.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isEdit.value ? '编辑成功' : '添加成功!'
                })
                getTableData()
            }
            initForm()
            dialogFormVisible.value = false
        }
    })
}

const delUnit = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await deleteBgq(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getTableData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

const editUnit = async (row) => {
    isEdit.value = true
    dialogTitle.value = '编辑办公区'
    form.value = JSON.parse(JSON.stringify(row))
    if (row.administrative) {
        pids.value = getPids(row.administrative)
    }
    if (form.value.map) {
        fileList.value = [{
            name: '1',
            url: form.value.map
        }]
    }
    //form.value.createYear = form.value.createYear == 0 ? '' : form.value.createYear
    form.value.areaId = form.value.id
    dialogFormVisible.value = true
}

const onSubmit = () => {
    page.value = 1
    getTableData()
}

const onReset = () => {
    searchInfo.value = {
        address: '',
        administrative: '',
        name: '',
        ownershipType: ''
    }
    searchPids.value = []
    getTableData()
}
</script>

<style lang="scss">
.gva-search-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.item {
    display: flex;
    margin-bottom: 10px;
    .label {
        font-size: 16px;
        margin-right: 6px;
    }
    .value{
        font-size: 16px;
    }
}
.btns{
    margin-top: 20px;
    font-size: 18px;
}
</style>